<div class="chrom-mapping">
  <img src="../../images/chromosomes/${Organism.name}/big/${Chromosome}.jpg" alt="Chromosome ${Chromosome}" style="height:${(Ranges.size()*6)+20}px;"/>
  <div class="bars" style="height:${(Ranges.size()*6)+40}px;">
    <div class="marker"><div class="markerLeft"></div></div>
    <g:set var="barNr" value="${0}" />
    <g:each in="${Ranges.keySet()}" var="range">
      <g:remoteLink style="top:${barNr*6}px;" action="proteinList" update="proteinTable" params="${[start:range, end:(range+RangeWidth-1), chromosome:Chromosome, organism:Organism.id, max:ChromosomeEnd, ranges:Ranges.size()]}">
        <div class="bar" style="width:<g:if test="${Ranges[range]['all']!=0}">${(Ranges[range]['all']/Scale)/7.2}%</g:if><g:else>0px</g:else>;">
          <div class="found" style="width:<g:if test="${(Ranges[range]['all']/Scale)!=0}">${(Ranges[range]['identified']*100)/(Ranges[range]['all'])}</g:if><g:else>0</g:else>%;"></div>
        </div>
        <div class="info">
          <div class="range">${range} - <g:if test="${(range+RangeWidth-1)>ChromosomeEnd}">${ChromosomeEnd}</g:if><g:else>${range+RangeWidth-1}</g:else><span>${(Ranges[range]['identified'])?(Ranges[range]['identified']):0} of ${Ranges[range]['all']} Proteins identified (${(Ranges[range]['identified'])?((Ranges[range]['identified']*100)/(Ranges[range]['all'])).toInteger():0}%)</span></div>
          <div class="projects">
            <g:each in="${Projects}" var="proj">
              <div class="project"><div class="projectBar" style="width:${Ranges[range][proj.id]['percent']}%; background-color:${Colors[proj.id]};"></div><div class="txt">in ${proj.name} <span>${Ranges[range][proj.id]['identified']} Proteins (${Ranges[range][proj.id]['percent']}%) identified</span></div></div>
            </g:each>
          </div>
        </div>
      </g:remoteLink>
      <g:set var="barNr" value="${barNr+1}" />
    </g:each>
    <div class="reference" >
      <g:each in="${0..(Math.floor(Max/10)+1)}" var="i">
        <div class="sep<g:if test="${(i%10==0)||((Math.floor(Max/10)+1)==i)}"> labeled</g:if>" style="<g:if test="${((Math.floor(Max/10)+1)==i)}">right:0px;</g:if><g:else>left:${((i*100)/(Math.floor(Max/10)+1)).toDouble()}%;</g:else>"><g:if test="${(i%10==0)||((Math.floor(Max/10)+1)==i)}"><div class="reflabel">${i*10}</div></g:if></div>
      </g:each>
    </div>
  </div>
  <div class="legend">
      <div class="project">
        <div class="color" style="background: #888;border: 1px solid #444;"></div>
        <div class="projectName">Number of all Proteins in this Region</div>
      </div>
      <div class="project">
        <div class="color" style="background-color: #3CF;border: 1px solid #444;"></div>
        <div class="projectName">Number of Identified Proteins in this Region</div>
      </div>
  </div>
  <g:if test="${(Marked!=null)}">
    <script type="text/javascript">setMarker(${Marked['Start']},${Marked['End']},${ChromosomeEnd},${Ranges.size()},"${Marked['Label']}");</script>
  </g:if>
  <script type="text/javascript">
    $(document).ready(function () {
      $('.chrom-mapping .bars a').click(function(){
          showProteinTable();
      });
    });
  </script>
</div>
